<template>
    <div class="card-container">
        <span>选中个数: <b style="padding-left: 10px">{{ checkedNum }}</b></span>
        <br>
        <el-table
            :data="checkedNodes"
            max-height="350"
            border
            style="width: 100%; margin: 20px 0;"
        >
            <el-table-column
                prop="id"
                label="大类ID"
                width="120"
            />
            <el-table-column
                prop="name"
                label="名称"
                width="200"
            />
            <el-table-column
                prop="status"
                label="状态"
                width="120"
            >
                <template slot-scope="scope">
                    <el-tag
                        :type="scope.row.status === 0 ? 'info' : 'success'"
                        disable-transitions
                    >{{ scope.row.status === 0 ? '隐藏' : '显示' }}</el-tag>
                </template>
            </el-table-column>
        </el-table>
        <div>
            <el-button type="danger" @click="deleteChecked">删除所选大类</el-button>
            <el-button style="margin-left: 100px" type="primary" @click="displayChecked">全部显示</el-button>
            <el-button type="info" @click="hideChecked">全部隐藏</el-button>
        </div>
    </div>
</template>

<script>
import { batchCategoryDelete, batchCategoryInvisible, batchCategoryVisible } from '@/api/category'

export default {
    name: 'BatchOperation',
    props: {
        checkedKeys: {
            type: Array,
            default: () => []
        },
        checkedNodes: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        checkedNum() {
            return this.checkedKeys.length
        }
    },
    methods: {
        deleteChecked() {
            this.$confirm('此操作将永久删除当前所选大类, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                batchCategoryDelete(this.checkedKeys).then(() => {
                    this.$emit('batch-delete', this.checkedKeys)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        displayChecked() {
            batchCategoryVisible(this.checkedKeys).then(() => {
                this.$emit('batch-display', this.checkedKeys)
            })
        },
        hideChecked() {
            batchCategoryInvisible(this.checkedKeys).then(() => {
                this.$emit('batch-hide', this.checkedKeys)
            })
        }
    }
}
</script>

<style scoped>

</style>
